import React, {PureComponent} from 'react';

class ErrorBoundaryDemo extends PureComponent {

    state = {
        // 子组件是否产生错误
        hasErrors: ''
    }

    // 子组件发生错误，生产环境才会生效，开发环境还是会产生错误代码
    static getDerivedStateFromError(error) {
        return {
            hasErrors: error
        }
    }

    // 子组件异常，可以把异常发送给服务器，进行错误统计
    componentDidCatch(error, errorInfo) {
        console.error("子组件渲染异常：", error.message);
        console.error(errorInfo.componentStack);
    }

    render() {
        return (
            <div style={{padding: 20}}>
                <h1>ErrorBoundaryDemo组件</h1>
                {
                    this.state.hasErrors
                        ? <p>子组件渲染异常</p>
                        : <Child/>
                }
            </div>
        );
    }
}

class Child extends PureComponent {

    state = {
        list: ['新闻', '图片']
    }

    render() {
        return (
            <div>
                <h2>子组件内容</h2>
                {this.state.list.map((item, index) => <p key={index}>{item}</p>)}
                <button onClick={this.loadData}>加载数据</button>
            </div>
        )
    }

    loadData = () => {
        // list属性会被修改为字符串，导致组件异常
        this.setState({
            list: ''
        })
    }
}

export default ErrorBoundaryDemo;
